<template>
	<div class="page">
		<div class="page-header">
			<img class="page-header__banner" src="~@/assets/images/speciality-header.png" alt="banner">
			<div class="page-header__bd" style="">
				<h1 class="detail-name">{{details.name}}</h1>
				<el-row type="flex">
					<div style="flex: 1;">
						<div class="detail-tag">
							所属门类<span style="margin-left: 8px;">{{ details.grandCategoryName }}</span>
						</div>
						<div class="detail-tag">
							所属专业类<span style="margin-left: 8px;">{{ details.parentCategoryName }}</span>
						</div>
						<div class="detail-tag">
							专业代码<span style="margin-left: 8px;">{{ details.code }}</span>
						</div>
					</div>
					<el-row type="flex" align="middle" style="flex-shrink: 0;">
						<span @click="toggleCollectStatus" class="collect">
							<i style="font-size: 28px;" :class="`collect-icon el-icon-star-${collect.isCollect ? 'on' : 'off'}`"></i>
							<span class="collect-text">收藏</span>
						</span>
						<el-dropdown>
							<el-button class="modify-button" type="primary">
								<span style="margin-right: 10px;">收藏列表</span>
								<i class="el-icon-caret-bottom"></i>
							</el-button>
							<el-dropdown-menu class="modify-dropdown" slot="dropdown">
								<el-dropdown-item v-for="item in collect.list" :key="item.id">
									<el-row type="flex" align="middle" style="min-width: 89px;">
										<span @click="goDetails(item)" style="flex: 1; margin-right: 10px;">{{ item.name }}</span>
										<i @click.stop="onCancelCollectItem(item)" style="flex-shrink: 0; line-height: 1;" class="el-icon-delete"></i>
									</el-row>
								</el-dropdown-item>
								<el-dropdown-item v-if="collect.list.length === 0">暂无数据</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-button @click="goMajorsDiff" style="margin-left: 18px;" class="modify-button" type="primary">专业对比</el-button>
					</el-row>
				</el-row>
			</div>
		</div>
		<div class="page-bd">
			<div>
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">专业概述</div>
				</div>
				<div class="ui-article">
					{{details.describe}}
				</div>
			</div>
			<div>
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">专业课程</div>
				</div>
				<div class="ui-article">
					{{details.courseInfo}}
				</div>
			</div>
			<div>
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">科目相关度</div>
				</div>
				<div class="ui-article">
					<div style="display: flex;">
						<div style="width: 835px; flex-shrink: 0; --score-cell-width: 48px;">
							<span v-for="item in details.majorScore" class="score-cell">
								<span class="score-cell__label">{{ item.name }}</span>
								<el-rate v-model="item.score" disabled show-score text-color="var(--primaryColor)" :colors="['var(--primaryColor)', 'var(--primaryColor)', 'var(--primaryColor)']" score-template="{value}" style="display: inline-block;"></el-rate>
							</span>
						</div>
						<div style="flex: 1; margin-top: -90px;">
							<RadarChart height="400px" :chartData="radarData"></RadarChart>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">考研方向</div>
				</div>
				<div class="ui-article" style="white-space: pre-wrap;">{{ details.studyType }}</div>
			</div>
			<div>
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">就业方向</div>
				</div>
				<div class="ui-article">{{ details.workType }}</div>
			</div>
			<!-- 招生院校 -->
			<div style="position: sticky">
				<div class="ui-title">
					<div class="ui-title__icon"></div>
					<div class="ui-title__name">招生院校</div>
				</div>
				<div>
					<!-- 理科: 理科、艺术理 文史: 文史、艺术文  -->
					<el-radio-group @change="getMajorRelevantSchool" v-model="relevantSchool.type" style=" margin-right: 34px; flex-shrink: 0;">
						<el-radio-button :label="2">文史</el-radio-button>
						<el-radio-button :label="1">理工</el-radio-button>
					</el-radio-group>
					<span>
						<span>年份: {{ relevantSchool.year }}年</span>
						<span style=" margin: 0 40px; ">院校: {{ relevantSchool.count }}所</span>
						<span>录取人数: {{ relevantSchool.enterCount }}人</span>
					</span>
				</div>
        <!-- max-height="100vh" -->
				<el-table style="overflow-y: auto; margin-top: 21px;" class="ui-table" :height="tableHeight" v-loading="relevantSchool.loading" :data="relevantSchool.schoolList">
					<el-table-column width="50" label="序号" type="index" :index="cumputeTableIndex" align="center" />
					<el-table-column width="200" label="学校名称" align="center" prop="schoolName">
						<template slot-scope="scope">
							<div class="text-left">{{ scope.row.schoolName }}</div>
						</template>
					</el-table-column>
					<el-table-column label="招生专业(类)" align="center" prop="majorName">
						<template slot-scope="scope">
							<div class="text-left">{{ scope.row.majorName }}</div>
						</template>
					</el-table-column>
					<el-table-column width="100" label="批次" align="center" prop="batch" />
					<el-table-column width="100" label="录取数" align="center" prop="enterCount" />
					<el-table-column width="140" label="最高/平均/最低分" align="center">
						<template slot-scope="scope">
							{{ scope.row.score }}
						</template>
					</el-table-column>
					<el-table-column width="100" label="位次" align="center" prop="weici" />
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import { request } from "@/util/request.js"
import RadarChart from "@/components/Dashboard/RadarChart"

export default {
	components: { RadarChart },
	data() {
		return {
			details: [],
			infos: {},
			radarData: {},
			collect: {
				list: [],
				isCollect: false,
			},
			// 招生院校
			relevantSchool: {
				type: 1,
				loading: false,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
			},
      tableHeight: 0
		}
	},
	created() {
    let pageHeight = document.documentElement.clientHeight;
    this.tableHeight = pageHeight - 75 - 144 - 32
		this.getMajorDetail()
		this.getCollectList()
	},
  methods: {
		cumputeTableIndex(index) {
      let { pageNum, pageSize } = this.relevantSchool.queryParams
      return (pageNum - 1) * pageSize + index + 1
    },

		goDetails(row) {
			const routeData = this.$router.resolve({
				path: '/speciality/majorsDetail',
				query: {
					name: row.name
				}
			})
			window.open(routeData.href, '_blank')
		},
		getMajorDetail() {
			request({
				method: 'get',
				url: 'majorDetailInfo/getMajorDetails',
				params: {
					name: this.$route.query.name
				}
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.details = res.data
				document.title = this.details.name + "专业介绍"
				this.getCollectListStatus()
				this.getMajorRelevantSchool()
				this.radarData = res.data.majorScore.reduce((radar, item) => {
					radar.indicator.push({
						text: item.name,
						max: 5,
					})
					radar.seriesData.push(item.score)
					return radar
				}, { indicator: [], seriesData: [] })
			})
		},
		toggleCollectStatus() {
			if (this.collect.isCollect) {
				this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: this.details.code, type: 2, }
					]
				}).then(res => {
					this.collect.isCollect = false
					this.getCollectList()
				})
			} else {
				this.$store.dispatch('setCollectStatus', {
					action: 'add',
					type: 2,
					code: this.details.code,
					name: this.details.name
				}).then(res => {
					this.collect.isCollect = true
					this.getCollectList()
				})
			}
		},
		onCancelCollectItem(item) {
			console.log('item', item);
			this.$confirm(`确定删除该收藏？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				return this.$store.dispatch('setCollectStatus', {
					action: 'cancel',
					params: [
						{ code: item.code, type: 2, }
					]
				})
			}).then(res => {
				if (item.code === this.details.code) {
					this.collect.isCollect = false
				}
				this.getCollectList()
			})
		},
		getCollectList() {
			this.$api.getCollectList({
				pageNum: 1,
				pageSize: 500,
				type: 2, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.collect.list = res.data.list
			})
		},
		getCollectListStatus() {
			let userInfo = this.$store.getters.userInfo
			this.$api.isCollect({
				userId: userInfo.userId,
				code: this.details.code,
				type: 2, // 收藏类型 1:学校 2:专业
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				this.collect.isCollect = res.data
			})
		},
		getMajorRelevantSchool() {
			this.relevantSchool.loading = true
			this.$api.getMajorRelevantSchool({
				name: this.details.name,
				type: this.relevantSchool.type,
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				console.log('getMajorRelevantSchool', res.data);
				this.relevantSchool = {
					...this.relevantSchool,
					...res.data,
				}
			}).finally(() => this.relevantSchool.loading = false)
		},
		goMajorsDiff() {
			this.$router.push({
				path: '/speciality/diff',
				query: {
					name: this.details.name
				}
			})
		},

	},

}
</script>

<style lang="stylus" scoped>
.page
	font-size: 15px;
	background: #F9F9F9;
	&-bd
		width BodyMaxWidth
		margin 10px auto 0 auto
		uiBlock();
		padding 32px 22px 32px 22px
		box-sizing: border-box;
.page-header
	width: 100%;
	height: 260px;
	position relative

	&__banner
		width 100%
		height 100%
		object-fit: cover;
		position absolute
		top 0
		left 0
	&__bd
		padding 47px 17px 0 17px
		position relative
		z-index 1
		width BodyMaxWidth
		margin 0 auto
		box-sizing: border-box;
.detail
	&-name
		margin 0 0 47px
		font-size: 40px;
		// font-family: Alimama FangYuanTi VF;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 48px;
		text-shadow: 0px 4px 4px rgba(121,68,2,0.1);

	&-tag
		display inline-flex
		align-items center
		padding 0 16px
		line-height: 40px;
		border: 1px solid #F9F9F9;
		border-radius: 20px;
		font-size: 16px;
		font-weight: 400;
		color: #FAFAFA;
		margin-right 20px

.score-cell
	width: 33%;
	margin-bottom: 20px;
	display: inline-flex;
	align-items: center;
	/deep/
		.el-rate__icon
			font-size 22px
			margin-right 0
		.el-rate__text
			margin-left 20px
	&__label
		width var(--score-cell-width, auto)
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
		display: inline-flex;
		align-items: center;
		margin-right 30px

.modify-dropdown /deep/
	.el-dropdown-menu__item
		min-width: 127px;
		box-sizing: border-box;
		padding 0 7px
	.el-icon-delete
		font-size 14px
		margin-left 5px

.modify-button
	width: 129px;
	height: 40px;
	background: #FF7B3F;
	border-radius: 6px;
	font-size: 18px;
	font-weight: PingFangMedium500;
	color: #fff;
	padding 0 20px
	box-sizing: border-box;

.collect
	display flex
	align-items center
	color PrimaryColor
	margin-right 28px
	cursor pointer
	&-icon
		font-size 28px
		margin-right 8px
	&-text
		font-size: 18px;
		font-weight: 400;
</style>
